body {
  /* background-color: #666; */
}
.div1 {
  width: 0;
  height: 0;
  padding: 0;
  border-top: 10px #0066b1 solid;
  border-bottom: 10px #0066b1 solid;
  border-left: 10px #fff solid;
  border-right: 10px #fff solid;
  border-radius: 50%;
  /* rotate是在平面中旋转，正值表示顺时针 */
  /* scale括号中有两个值，第一个是x方向，第二个是y方向。如果只有一个，则x=y */
  transform: scale(1.5);
  /* moz火狐浏览器 */
  -moz-transform: scale(1.5);
  /* ms微软的IE浏览器 */
  -ms-transform: scale(1.5);
  /* o 欧朋浏览器 */
  -o-transform: scale(1.5);
  /* webkit谷歌浏览器，苹果浏览器 */
  -webkit-transform: scaleq(1.5);
  /* 过渡效果：从一个状态缓慢的变成另一个状态 */
  transition: all 2s 1s;
}
/* 鼠标悬停 */
.div1:hover {
  transform:rotate(-45deg) scale(1.5);
}
.div2 {
  width: 140px;
  height: 10px;
  background-color: red;
  border-left: 40px yellow solid;
  border-right: 40px yellow solid;
  border-radius: 4px;
  transition: all 1s;
}
.div2:hover {
  transform: scale(1.2);
}
.div3 {
  width: 0;
  height: 0;
  animation: myAnimation 2s infinite;
}
/* 关键帧，动画的关键节点的状态 */
@keyframes myAnimation {
  0% {
    width: 0;
    height: 0;
  }
  50% {
    width: 100px;
    height: 100px;
    background-color: red;
    border-radius: 20%;
    transform: rotate(360deg);
  }
  100% {
    width: 180px;
    height: 180px;
    background-color: black;
    border-radius: 50%;
    transform: rotate(720deg);
  }
}